<template>
	<!--人才认证 -->
	<view class="wrap">
		<view class="mar-top-20 input-group bg-ff">
			<view class="flex t-line">
				<view class="fc-33 fs-28 flex-1">资料填写</view>
				<view v-if="authData.auditStatus == 1" class="text-tr fc-52c">审核通过</view>
				<view v-if="authData.auditStatus == 2" class="text-tr fc-df5">审核失败</view>
				<view v-if="authData.auditStatus == 0" class="text-tr fc-f1a">待审核</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">姓名</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请输入您的姓名" :disabled="authData.auditStatus == 1"
						v-model="authData.name" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">性别</text>
				<view class="input-row-item">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd mar-right-20" v-for="(item, index) in sex"
							:key="item.value">
							<radio :value="item.value" :checked="item.checked" :disabled="authData.auditStatus == 1"
								color="#84C0F4" /><span>{{item.label}}</span>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">联系方式</text>
				<view class="input-row-item" v-if="phone !=''">
					<input class="padding-10" maxlength="11" type="number" disabled placeholder="请输入您的联系方式"
						v-model="authData.phone" />
				</view>
				<view class="input-row-item" v-else>
					<input class="padding-10" maxlength="11" type="number" :disabled="authData.auditStatus == 1"
						placeholder="请输入您的联系方式" v-model="authData.phone" />
				</view>
			</view>
			<view class="input-row border-bottom-1px"
				v-if="authData.auditStatus != 0 && authData.auditStatus != 1 && authData.auditStatus != 3">
				<text class="title">验证码</text>
				<view class="input-row-item flex">
					<input class="padding-10 flex-1" maxlength="6" type="number" placeholder="请输入验证码"
						v-model="authData.verifyCode " />
					<button class="codebtn" :style="{'background':getCodeBtnColor}"
						@click="getCode()">{{getCodeText}}</button>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">毕业院校</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请填写毕业院校" :disabled="authData.auditStatus == 1"
						v-model="authData.endSchoolName" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">毕业时间</text>
				<view class="picker row align-width">
					<picker mode="date" :value="authData.ndSchoolTime" :disabled="authData.auditStatus == 1"
						:start="startDate" :end="endDate" @change="bindDateChange" style="width: 423rpx;">
						<input class="padding-10 fs-28 fc-66" disabled="true" placeholder="请选择"
							:value="authData.ndSchoolTime" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">专业名称</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请填写专业名称" :disabled="authData.auditStatus == 1"
						v-model="authData.professionName" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title" style="width: 28%;"><text class="fc-df5">*</text>地区</text>
				<view class="input-row-item">
					<pickerAddress class="fc-66" @change="changeAddres">{{authData.regionName}}</pickerAddress>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>证件类型</text>
				<view class="picker row align-width">
					<picker @change="bindPickerChange($event,certdata)" :disabled="authData.auditStatus == 1"
						:value="authData.certificateType" :range="certdata" style="width: 423rpx;">
						<input class="padding-10 fs-28 fc-66" disabled="true" placeholder="请选择"
							:value="certdata[authData.certificateType]" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">证件号码</text>
				<view class="input-row-item">
					<input class="padding-10" maxlength="18" type="number" :disabled="authData.auditStatus == 1"
						placeholder="请填写证件号码" v-model="authData.certificateNo" />
				</view>
			</view>
			<view class="">
				<text class="title fc-33 pad-top-20 dis-block" style="width: 40%;"><text
						class="fc-df5">*</text>毕业证/学生证</text>
				<view class="head-img mar-top-15" @click="uploadImgs(1)">
					<view v-if="authData.endSchoolPicture==''" class="yyzz fs-60">+</view>
					<image v-else :src="getImgUrl(authData.endSchoolPicture)"></image>
				</view>
			</view>
			<view class="">
				<text class="title  pad-top-20 dis-block pad-left-25" style="width: 40%;">证件照</text>
				<view class="flex">
					<view class="head-img mar-top-15" @click="uploadImgs(2)">
						<view v-if="authData.certificatePicturePathFront==''" class="yyzz fs-28">正面</view>
						<image v-else :src="getImgUrl(authData.certificatePicturePathFront)"></image>
					</view>
					<view class="head-img mar-top-15 mar-left-25" @click="uploadImgs(3)">
						<view v-if="authData.certificatePicturePathBack==''" class="yyzz fs-28">反面</view>
						<image v-else :src="getImgUrl(authData.certificatePicturePathBack)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mar-top-20 input-group bg-ff" v-if="authData.auditStatus==1 && typeApply=='hotelApply'">
			<view class="flex t-line mar-top-20">
				<view class="fc-33 fs-28 flex-1">入住信息</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">入住时间</text>
				<view class="picker row align-width">
					<picker mode="date" :value="entryTime" :start="nowDate" :end="outDate" @change="entryTimeChange"
						style="width: 423rpx;">
						<input class="padding-10 fs-28 fc-66" disabled="true" placeholder="请选择入住时间"
							:value="entryTime" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">离开时间</text>
				<view class="picker row align-width">
					<picker mode="date" :value="outTime" :start="nowDate" :end="outDate" @change="outTimeChange"
						style="width: 423rpx;">
						<input class="padding-10 fs-28 fc-66" disabled="true" placeholder="请选择离开时间" :value="outTime" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
		</view>
		<!-- <view class="fc-84 mar-top-30">上传简历</view> -->
		<view class="btn-row row">
			<button v-if="authData.auditStatus ==2" type="primary" @click="register(2)"
				class="btn-save width-90 fc-ff">重新提交</button>
			<button v-else-if="authData.auditStatus==1 && typeApply=='hotelApply'" type=" primary"
				@click="applyAuthHotel" class="btn-save width-90 fc-ff">申请人才公寓</button>
			<view v-else-if="authData.auditStatus == 0 || authData.auditStatus == 1 || authData.auditStatus == 3 ">
			</view>
			<button type="primary" v-else class="btn-save width-90" @tap="register(1)">提交审核</button>
		</view>
	</view>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvue-picker.vue'; //时间组件	
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'; //省市
	import uploadImage from '@/common/ossutil/uploadFile';
	import {
		mapState
	} from 'vuex'; //位置授权
	export default {
		components: {
			mpvuePicker,
			pickerAddress
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			nowDate() {
				return this.getDate('now');
			},
			outDate() {
				return this.getDate('out');
			}
		},
		data() {
			//时间
			const currentDate = this.getDate({
				format: true
			});
			return {
				date: currentDate,
				sex: [{
					label: "男",
					value: 0,
					checked: true
				}, {
					label: "女",
					value: 1
				}], //性别
				getCodeText: '获取验证码',
				getCodeBtnColor: "#84C0F4",
				getCodeisWaiting: false,
				regionList: '', //区域数据
				phone: uni.getStorageSync('phone'),
				authData: {
					phone: '' || uni.getStorageSync('phone'), //联系电话					
					wxuserId: uni.getStorageSync('wxuser_id'), //微信用户id	
					endSchoolPicture: '', //毕业证/学生证
					certificatePicturePathFront: '', //证件照正面
					certificatePicturePathBack: '', //证件照反面
					ndSchoolTime: '请选择', //毕业时间					
					regionName: '请选择',
					gender: 0, //跟上面的sex里checked为true的值对应		
					certificateType: 0
				},
				tmpImageUrl: '',
				cardName: '请选择',
				certdata: ['--请选择--', '身份证', '护照', '港澳台同胞证'],
				typeApply: '', // 人才申请标志
				entryTime: '', // 进出时间
				outTime: '', // 进出时间
				applyHotelData: '', // 酒店房间信息
			}
		},
		onLoad(option) {
			if (option && option.type) {
				// 人才酒店申请
				if (option.type == 'hotelApply') {
					this.typeApply = option.type
					console.log('option.type', option.type)
				}
			}
			if (option && option.data) {
				// 酒店房间信息
				this.applyHotelData = JSON.parse(option.data)
				console.log('option.data', this.applyHotelData)
			}
		},
		mounted() {
			this.getAuthInfo()
		},
		methods: {
			// 申请酒店人才房间入住
			async applyAuthHotel() {
				if (!this.entryTime) return uni.showToast({
					title: '请选择入住时间',
					icon: 'none'
				})
				if (!this.outTime) return uni.showToast({
					title: '请选择离开时间',
					icon: 'none'
				})
				let openId = uni.getStorageSync('openid')
				let params = {
					xcxOpenId: openId,
					hotelSubId: this.applyHotelData.hotelSubId,
					hotelRoomId: this.applyHotelData.hotelRoomId,
					hotelRoomCount: 1,
					contactPhone: this.authData.phone,
					entryTime: this.entryTime + " 12:00",
					outTime: this.outTime + " 12:00",
					hotelMan: [this.authData.name],
				}
				console.log('params', params)
				let res = await this.$apis.authHotelApply(params);
				if (res) {
					console.log('res', res)
					// 申请成功 跳转至展示页面
					uni.showToast({
						title: '申请成功,请等待酒店审核',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 500);
					// uni.redirectTo({

					// })
				}
			},
			//获取人才认证列表
			async getAuthInfo() {
				var userId = uni.getStorageSync('wxuser_id');
				if (!userId) {
					uni.showToast({
						title: '您尚未登录，正在为您跳转登录页',
						icon: 'none'
					});
					setTimeout(() => {
						this.$store.dispatch("reLogin");
					}, 1000)
					return;
				}
				let param = {
					wxuserId: uni.getStorageSync('wxuser_id'),
					pageNum: 1,
					pageSize: 10,
				}
				let res = await this.$apis.getAuthInfo(param);
				if (res.code == 200) {
					if (res.rows.length > 0) {
						this.authData = res.rows[0]
						uni.setStorageSync('auditStatus', this.authData.auditStatus); //存储认证状态
					}
				}
			},
			//选择性别
			radioChange(e) {
				this.authData.gender = this.radio = e.detail.value
			},
			//证件类型选择
			bindPickerChange(e) {
				const index = e.target.value
				this.cardName = this.certdata[index]
				this.authData.certificateType = e.target.value
			},
			//毕业时间选择
			bindDateChange: function(e) {
				this.authData.ndSchoolTime = e.target.value;
			},
			// 人才酒店进出时间
			entryTimeChange(e) {
				this.entryTime = e.target.value;
			},
			// 人才酒店进出时间
			outTimeChange(e) {
				this.outTime = e.target.value;
			},
			//选择地区
			changeAddres(data) {
				// 审核通过 不可选择地区
				if (this.authData.auditStatus == 1) return;
				this.authData.regionName = data.data.join('')
				console.log(this.authData.regionName)
			},
			// 选择毕业证/学生证---证件照			
			uploadImgs(type) {
				// 审核通过 不可编辑图片
				if (this.authData.auditStatus == 1) return;
				var that = this
				uni.chooseImage({
					success(res) {
						let tempFilePaths = res.tempFilePaths;
						that.tmpImageUrl = tempFilePaths[0];
						that.uploadFile(type);
					}
				});
			},
			// 上传图片
			uploadFile(type) {
				uni.showLoading({
					title: '图片上传中'
				});
				uploadImage(0, this.tmpImageUrl, 'person/talentauth/', result => {
					if (type == 1) {
						this.authData.endSchoolPicture = result
					} else if (type == 2) {
						this.authData.certificatePicturePathFront = result
					} else {
						this.authData.certificatePicturePathBack = result
					}
					uni.hideLoading();
				});
			},
			// 点击注册按钮
			async register(type) {
				var that = this
				if (!that.authData.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
				} else if (!that.authData.phone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					});
				} else if (!that.authData.verifyCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				} else if (!that.authData.endSchoolName) {
					uni.showToast({
						title: '请输入毕业院校',
						icon: 'none'
					});
				} else if (!that.authData.ndSchoolTime) {
					uni.showToast({
						title: '请输入毕业时间',
						icon: 'none'
					});
				} else if (!that.authData.professionName) {
					uni.showToast({
						title: '请输入专业名称',
						icon: 'none'
					});
				} else if (!that.authData.certificateType) {
					uni.showToast({
						title: '请选择证件类型',
						icon: 'none'
					});
				} else if (!that.authData.certificateNo) {
					uni.showToast({
						title: '请输入证件号码',
						icon: 'none'
					});
				} else if (!that.authData.certificatePicturePathFront) {
					uni.showToast({
						title: '请上传证件正面照',
						icon: 'none'
					});
				} else if (!that.authData.certificatePicturePathBack) {
					uni.showToast({
						title: '请上传证件反面照',
						icon: 'none'
					});
				} else if (that.authData.endSchoolPicture == '') {
					uni.showToast({
						title: '请上传毕业证或学生证',
						icon: 'none'
					});
				} else if (that.authData.regionName == '') {
					uni.showToast({
						title: '请选择地区',
						icon: 'none'
					});
				} else {
					if (type == 1) {
						let res = await this.$apis.addAuthInfo(that.authData);
						if (res) {
							uni.showToast({
								title: '提交成功'
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 1200)
						} else {
							uni.showToast({
								title: '提交失败'
							})
						}
					} else {
						//重新提交						
						this.authData.auditStatus = 0
						let res = await this.$apis.eidtAuthInfo(this.authData);
						if (res) {
							uni.showToast({
								title: '提交成功'
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 1200)
						} else {
							uni.showToast({
								title: '提交失败'
							})
						}
					}
				}

			},
			//获取验证码
			getCode() {
				var that = this
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.authData.phone))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#ccc" //追加样式，修改颜色
				//示例用定时器模拟请求效果				
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					var res = this.$apis.getVerifyCode(that.authData.phone);
					if (res) {
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						}); //弹出提示框				
						this.setTimer(); //调用定时器方法
					}
				}, 1000)
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#84C0F4";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			//年月日
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				} else if (type === 'out') {
					month = month + 1;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//图片配置域名(oss不需要，直接是返回完整的访问地址)
			getImgUrl(icon) {
				return icon;
			},
		}
	}
</script>
<style lang="scss">
	page {
		background: #f6f6f6;

		.input-group {
			border-radius: 8rpx;
			padding: 26rpx 28rpx;

			.t-line {
				border-bottom: 2rpx dashed #f6f6f6;
				padding: 0 0 26rpx;
				height: auto;
			}

			.border-bottom-1px {
				position: relative;

				&::after {
					position: absolute;
					z-index: 1;
					right: 0;
					bottom: 0;
					left: 20upx;
					height: 1upx;
					content: '';
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5);
					background-color: #e2e2e2;
				}
			}

			.input-row {
				display: flex;
				flex-direction: row;
				position: relative;
				background: #fff;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;

				.yzb-next {
					color: $font-color-999;
					text-align: center;
					font-size: 48rpx;
					position: relative;
					top: 13rpx;
				}

				.title {
					width: 25%;
					padding: 20upx 0;
					padding-left: 30upx;
					line-height: 50upx;
					color: #333;
				}

				.pickstyle {
					width: 460rpx;

					input {
						font-size: 28rpx;
						text-align: left;
						height: 60rpx;
					}
				}

				.input-row-item {
					width: 568rpx;

					.remarktextarea {
						height: 205rpx;
						width: 494rpx;
					}

					input {
						text-align: left;
						font-size: 28rpx;
					}

					.codebtn {
						min-width: 136rpx;
						padding: 0 20rpx;
						line-height: 65rpx;
						color: #fff;
						font-size: 28rpx;
						text-align: center;
						height: 65rpx;
						background: #84C0F4;
						border-radius: 40rpx;
					}
				}

			}
		}

		.head-img {
			width: 222rpx;
			height: 232rpx;
			border-radius: 8rpx;

			.yyzz {
				width: 222rpx;
				height: 232rpx;
				display: block;
				background: #F8F8F8;
				border-radius: 8rpx;
				text-align: center;
				line-height: 232rpx;
				margin: 20rpx 0;
				color: #9B9B9B;
			}

			image {
				width: 222rpx;
				height: 232rpx;
				display: block;
			}
		}

		.btn-row {
			width: 100%;
			box-sizing: border-box;

			.btn-save {
				background-color: #84C0F4;
				height: 90upx;
				line-height: 90upx;
				font-size: $font-size-34;
			}

			.width-55 {
				width: 55%;
			}

			.width-90 {
				width: 90%;
				margin: 60rpx auto;
			}
		}
	}
</style>
